<!-- 健康首页 -->
<template>
<div class="container">
    <!-- 头像、身高体重部分 -->
    <div class="profile white_box">
        <div class="profile_img">
            <img :src="profileUrl" alt="用户头像" @click="$router.push('/baseinfo')">
            <div>{{ greetings }}，优秀的{{ userInfo.name }}</div>
        </div>
        <div class="baseinfo" @click="$router.push('/analyseweight')">
            <span class="height_block">{{ userInfo.height }} cm</span>
            <span class="weight_block">{{ userInfo.weight }} KG</span>
        </div>
    </div>
    <!-- 饮食运动 -->
    <div class="white_box">
        <!-- 今日记录 -->
        <div class="record">
            <p>今日记录</p>
            <div class="record_flex">
                <div class="record_item" @click="toRecFood">
                    <span>饮食摄入</span>
                    <span>{{ calFood || 0 }}千卡</span>
                    <div class="to_record">查看
                        <van-icon name="arrow" />
                    </div>
                    <!-- 环形进度条 -->
                    <div class="circle_box">
                        <van-circle size="50" stroke-width="80" v-model="rate.food" :rate="rate.food" :speed="1000" :text="rate.food+'%'" />
                    </div>
                </div>
                <div class="record_item" @click="toRecSport">
                    <span>运动消耗</span>
                    <span>{{ calSport || 0 }}千卡</span>
                    <div class="to_record">查看
                        <van-icon name="arrow" />
                    </div>
                    <!-- 环形进度条 -->
                    <div class="circle_box">
                        <van-circle size="50" stroke-width="80" color="#e88e61" v-model="rate.sport" :rate="rate.sport" :speed="1000" :text="rate.sport+'%'" />
                    </div>
                </div>
            </div>
            <div style="padding: 0.375rem 1rem 1rem;font-size: 0.625rem;color: #888;line-height: 1rem;">
                如果今日的饮食摄入进度已满或即将满时，请您注意适当控制饮食哦~ <br>
                如果您今日的运动消耗热量进度还未满，那您可参考推荐的运动方案动起来咯~
            </div>
        </div>
        <!-- 今日食谱推荐 -->
        <div class="recommend">
            <div class="check_more" @click="$router.push('recommends?type=f')">查看更多
                <van-icon name="arrow" />
            </div>
            <div class="recommend_title" style="color: #e0a840;">今日食谱推荐</div>
            <div class="recommend_box">
                <div class="recommend_item" v-for="(item,index) in recommend.foodList" v-if="index < 3" :key="index" :style="{border:'0.125rem solid #e0a840','backgroundImage':'url('+item.foodIconUrl+')'}">
                    <div>{{ item.foodName }}</div>
                    <div>{{item.foodWeight}} g</div>
                    <div>{{ item.trophy }}千卡</div>
                </div>

            </div>
        </div>
        <!-- 今日运动推荐 -->
        <div class="recommend">
            <div class="check_more" @click="$router.push('recommends?type=s')">查看更多
                <van-icon name="arrow" />
            </div>
            <div class="recommend_title" style="color: #379bf2;">今日运动推荐</div>
            <div class="recommend_box">
                <div class="recommend_item" v-for="(item,index) in recommend.sportList" v-if="index<3" :key="index" :style="{border:'0.125rem solid #379bf2',backgroundImage:'url('+item.sportIconRrl+')'}">
                    <div>{{ item.sportName }}</div>
                    <div>{{ item.duration }}分钟</div>
                    <div>{{ item.trophy }}千卡</div>
                </div>

            </div>
        </div>
    </div>
    <!-- 健康测评入口 -->
    <div class="health_test white_box">
        <div style="font-size: 0.9375rem;">健康测评</div>
        <div v-show="!hasEvaluation">您还未完成健康测评，填写测评问卷让我们对您日常生活习惯、身体各项指标更了解之后，可以给您推荐更合理的饮食方案和运动方案哦~</div>
        <div class="goTest" v-show="!hasEvaluation" @click="$router.push('/evaluate')">开始测评</div>
        <div v-show="hasEvaluation">您已填写过健康测评问卷，如果您的生活习惯、身体指标有变化，可以重新填写问卷哦~</div>
        <div class="goTest" v-show="hasEvaluation" @click="$router.push('/checkevaluation')">查看测评问卷</div>
    </div>
</div>
</template>

<script>
import {
    apiRequest
} from '../../assets/js/axios_api';
import profileUrl from '../../assets/img/profile_p1.jpeg';
import profileUrlw from '../../assets/img/profile_p2.jpeg';
import profileUrlm from '../../assets/img/profile_p3.jpeg';

export default {
    metaInfo() {
        return {
            title: '健康首页'
        }
    },
    name: 'RecWeight',
    data() {
        return {
            profileUrl: '',
            greetings: '',
            userInfo: {},
            // 推荐数据
            recommend: {
                calFoodCommand: 0,
                calSportCommand: 0,
                foodList: [],
                sportList: [],
            },
            // 环形进度条数据
            rate: {
                food: 0, //0-100数字
                sport: 0, //0-100数字
            },
            hasEvaluation: false, //问卷是否已填写
            calFood: 0, //已记录饮食总热量
            calSport: 0, //已记录运动总热量
        }
    },
    components: {

    },
    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.profileUrl = this.userInfo.gender == '0' ? profileUrlm : this.userInfo.gender == '1' ? profileUrlw : profileUrl;
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            this.getGreetingTime()
            this.getRecoredData()
        },
        // 去记录饮食
        toRecFood() {
            this.$router.push('/foodrecoreded');
            // this.$router.push('/recfood');
        },
        // 去记录运动
        toRecSport() {
            this.$router.push('/sportrecoreded');
            // this.$router.push('/recsport');
        },
        // 根据当前时间判断显示时间段及问候语
        getGreetingTime() {
            let now = new Date().getHours()
            if (now < 5) {
                this.greetings = '该睡觉啦'
                return
            }
            if (now < 13) {
                this.greetings = '早上好啊'
                return
            }
            if (now < 19) {
                this.greetings = '下午好啊'
                return
            }
            if (now < 24) {
                this.greetings = '晚上好啊'
                return
            }
        },
        getRecoredData() {

            // 查问卷
            apiRequest(this, 'hmquestionnaire/' + this.userInfo.cusId, '', resData => {
                if (resData == null || resData == 'null') {
                    this.hasEvaluation = false;
                } else {
                    this.hasEvaluation = true;
                    sessionStorage.setItem('evaluateRes', JSON.stringify(resData))
                }
            }, 'get')
            // 查推荐方案-饮食
            apiRequest(this, 'foodplan/list', {
                cusId: this.userInfo.cusId
            }, resData => {
                resData.forEach(element => {
                    element.foodPlanDetails.forEach(obj => {
                        this.recommend.calFoodCommand += parseFloat(obj.trophy)
                        this.recommend.foodList.push(obj);
                    });
                });
                sessionStorage.setItem('calFoodCommand', this.recommend.calFoodCommand)
                sessionStorage.setItem('recommendFood',JSON.stringify(resData))
            }, 'get')
            // 查推荐方案-运动
            apiRequest(this, 'sportplan/list', {
                cusId: this.userInfo.cusId
            }, resData => {
                resData.forEach(element => {
                    element.sportPlanDetails.forEach(obj => {
                        this.recommend.calSportCommand += parseFloat(obj.trophy)
                        this.recommend.sportList.push(obj);
                    });
                });
                sessionStorage.setItem('calSportCommand', this.recommend.calSportCommand)
                sessionStorage.setItem('recommendSport',JSON.stringify(resData))
            }, 'get')
            // 查饮食
            apiRequest(this, 'hmfoodrecord/page', {
                cusId: this.userInfo.cusId
            }, resData => {
                let sum = 0;
                resData.list.forEach(element => {
                    element.foods.forEach(obj => {
                        sum += obj.foodTrophy
                    });
                });
                this.calFood = Math.round(sum * 100) / 100;
                setTimeout(() => {
                    this.rate.food = parseInt(sum / this.recommend.calFoodCommand * 100)
                }, 2000);
            }, 'get')
            // 查运动
            apiRequest(this, 'hmsportrecord/page', {
                cusId: this.userInfo.cusId,
            }, resData => {
                let sum = 0;
                resData.list.forEach(element => {
                    element.sports.forEach(obj => {
                        sum += parseInt(obj.sportTrophy)
                    });
                });
                this.calSport = Math.round(sum * 100) / 100;
                setTimeout(() => {
                    this.rate.sport = parseInt(sum / this.recommend.calSportCommand * 100)
                }, 2000);
            }, 'get')
        },
    }
}
</script>

<style lang="less" scoped>
@import "../../assets/css/common.less";

.container {
    background-color: #fff;
    font-size: 0.75rem;
    padding: 1rem 1rem 3.75rem;

    img {
        width: 100%;
    }

    .white_box {
        background-color: #fff;
        border-radius: 0.625rem;
        box-shadow: 0.125rem -0.125rem 0.625rem 0.0625rem rgba(158, 212, 145, 0.3);
        margin-bottom: 2rem;
    }

    .profile {
        padding: 0.875rem 0;

        &.white_box {
            background: url(../../assets/img/bg4.jpg) no-repeat;
            background-size: 100%;

        }

        .profile_img {
            font-size: 0.875rem;

            img {
                width: 5rem;
                height: 5rem;
                border-radius: 100%;
                vertical-align: middle;
                margin-left: 0.625rem;
                border: 0.375rem solid #eee;
            }

            div {
                display: inline-block;
                padding-left: 0.625rem;
            }
        }

        .baseinfo {
            background-color: @md-color;
            border-radius: 3.125rem;
            height: 2.5rem;
            line-height: 2.5rem;
            text-align: center;
            width: 80%;
            margin: 1.25rem auto 0;

            span {
                display: inline-block;
                width: 49%;
                background-repeat: no-repeat;
            }

            .height_block {
                border-right: 0.0625rem solid #fff;
                background-image: url(../../assets/img/icons/height1.png);
                background-size: 1.125rem;
                background-position: 0.625rem 0.625rem;
            }

            .weight_block {
                background-image: url(../../assets/img/icons/weight1.png);
                background-size: 1.75rem;
                background-position: 0.625rem 0.375rem;
            }
        }
    }

    .record {
        .record_flex {
            display: flex;
            justify-content: space-around;
            flex-wrap: nowrap;
        }

        p {
            padding-left: 1rem;
            padding-top: 1rem;
            font-size: 0.8125rem;
        }

        .record_item {
            padding: 1rem 3.75rem 1rem 1rem;
            border-radius: 0.625rem;
            margin: 1rem;
            background-position: 88% center;
            background-size: 2.5rem;
            background-repeat: no-repeat;
            position: relative;

            span {
                display: inline-block;
                margin: 0.125rem 0;
            }

            .to_record {
                font-size: 0.625rem;
                padding-top: 0.1875rem;
            }

            &:first-of-type {
                background-color: #faeed7;

                .to_record {
                    color: #e0a840;
                }
            }

            &:last-of-type {
                background-color: #e5f3ff;

                .to_record {
                    color: #379bf2;
                }
            }

            .circle_box {
                position: absolute;
                right: 0.625rem;
                top: 1.25rem;
            }
        }
    }

    .recommend {
        padding-bottom: 1rem;
        position: relative;

        .check_more {
            position: absolute;
            right: 1rem;
            top: 1rem;
            font-size: 0.625rem;
            color: #888;

        }

        .recommend_title {
            padding: 1rem;
            font-size: 0.8125rem;
        }

        .recommend_box {
            display: flex;
            justify-content: space-around;
        }

        .recommend_item {
            padding: 1.25rem 0;
            width: 26%;
            text-align: center;
            border-radius: 0.5rem;
            // background-image: url(../../assets/img/recommend/s_f_2.jpg);
            background-repeat: no-repeat;
            background-size: cover;

            div {
                background-color: rgba(0, 0, 0, 0.5);
                color: #fff;
                font-weight: bold;
            }
        }

    }

    .health_test {
        background: url(../../assets/img/test_icon.png) no-repeat;
        background-size: 24%;
        background-position: 94% center;
        padding-bottom: 0.625rem;

        div {
            padding: 1rem;
            padding-bottom: 0;
            width: 60%;
        }

        .goTest {
            width: 7.5rem;
            line-height: 1.875rem;
            height: 1.875rem;
            text-align: center;
            background-color: @img-color;
            color: #fff;
            border-radius: 0.5rem;
            padding: 0;
            margin: 1rem;
        }
    }
}
</style>
